<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '我的三率',
    },
    anonymous: false
  }
</route>

<script setup lang="ts">
import StatDetail from './components/StatDetail.vue'
import SignInStatus from './components/SignInStatus.vue'
import YearTermPicker from '@/components/YearTermPicker.vue'
import { StatApi } from '@/apis'
import { computeRate, formatRate } from '@/utils/common'

const detailType = ref(0) // 0 续报 1 留存 2 满班 3 签到情况
const detailTotal = ref(0)

const query = reactive({
  classYear: new Date().getFullYear(),
  term: 'WINTER',
})

const show = ref(false)

const initClassStatSummary = () => {
  return {
    plannedStudentCount: 0,
    passedStudentCount: 0,
    renewalStudentCount: 0,
    cancelStudentCount: 0,
    retainedStudentCount: 0,
    totalLessonCount: 0,
    cancelLessonCount: 0,

    renewalRate: 0,
    fullRate: 0,
    cancelRate: 0,
    retainedRate: 0,

    id: '',
    classId: '',
    confirmed: true,
    computeDate: '',
  }
}
const classStatSummary = ref<StatApi.ClassStat>(initClassStatSummary())
const classStatList = ref<StatApi.ClassStatResp[]>([])
const getClassStatList = async () => {
  classStatList.value = await StatApi.getClassStatList(query)

  const summary = initClassStatSummary()
  classStatList.value.forEach((item) => {
    summary.plannedStudentCount += item.plannedStudentCount
    summary.passedStudentCount += item.passedStudentCount
    summary.renewalStudentCount += item.renewalStudentCount
    summary.cancelStudentCount += item.cancelStudentCount
    summary.retainedStudentCount += item.retainedStudentCount
  })
  const allStudentCount = summary.passedStudentCount + summary.cancelStudentCount
  summary.fullRate = computeRate(summary.passedStudentCount, summary.plannedStudentCount)
  summary.renewalRate = computeRate(summary.renewalStudentCount, summary.passedStudentCount)
  summary.cancelRate = computeRate(summary.cancelStudentCount, allStudentCount)
  summary.retainedRate = computeRate(summary.retainedStudentCount, allStudentCount)
  classStatSummary.value = summary
}
const { loading, load } = useRequest(getClassStatList)
watch(() => query, () => load(), { deep: true })

const showDetail = (type, total) => {
  detailType.value = type
  detailTotal.value = total || 0
  show.value = true
}

onLoad(() => {
  // refresh()
})
</script>

<template>
  <view class="px py">
    <view class="border-rd-[16rpx] bg-white p-[24rpx]">
      <view class="flex items-center justify-between">
        <YearTermPicker v-model:class-year="query.classYear" v-model:term="query.term">
          <wd-icon name="caret-down-small" size="32rpx" color="#666" />
        </YearTermPicker>
        <view class="flex items-center gap-1">
          <text class="color-#86909C">
            更新数据
          </text>
          <wd-icon name="refresh" size="22rpx" color="#86909C" />
        </view>
      </view>
      <view class="mt-[24rpx] flex gap-[16rpx]">
        <view
          class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]"
          @click="showDetail(2, classStatSummary.fullRate)"
        >
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ (classStatSummary.fullRate).toFixed(2) }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              %
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            满班率
          </view>
        </view>
        <view
          class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]"
          @click="showDetail(0, classStatSummary.renewalRate)"
        >
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ (classStatSummary.renewalRate).toFixed(2) }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              %
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            续报率
          </view>
        </view>
        <view
          class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]"
          @click="showDetail(1, classStatSummary.retainedRate)"
        >
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ (classStatSummary.retainedRate).toFixed(2) }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              %
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            留存率
          </view>
        </view>
      </view>
    </view>
    <view v-if="loading" class="flex-row-center-center page">
      <wd-loading color="#33AD7C" />
    </view>
    <view v-else class="mt-4">
      <view class="font-size-[28rpx] color-[#111]">
        详情数据
      </view>
      <view v-for="(item, index) in classStatList" :key="index" class="mt-3 border-rd-[16rpx] bg-white p-[24rpx]">
        <view class="flex items-center justify-between gap-[24rpx]">
          <view class="flex-1 text-main">
            {{ item.className }}
          </view>
          <!-- <view class="border rd-lg text-xs" @click="showDetail(3, '')">
            签到情况
          </view> -->
        </view>
        <!-- <view class="font-size-[24rpx] color-[#4E5969] mt-1">2024.10.01-2024.12.01 · 周五晚上18:00-20:30</view> -->
        <view class="my-[20rpx]">
          <view class="line" />
        </view>
        <view class="flex items-center">
          <view class="flex-row-center-center flex-1 font-size-[26rpx] color-[#33AD7C]">
            满班({{ formatRate(item.fullRate) }})
          </view>
          <view class="line-col" />
          <view class="flex-row-center-center flex-1 font-size-[26rpx] color-[#33AD7C]">
            续报({{ formatRate(item.renewalRate) }})
          </view>
          <view class="line-col" />
          <view class="flex-row-center-center flex-1 font-size-[26rpx] color-[#33AD7C]">
            留存({{ formatRate(item.retainedRate) }})
          </view>
        </view>
      </view>
      <view v-if="!classStatList || !classStatList.length">
        <wd-status-tip image="content" tip="暂无数据" />
      </view>
    </view>
  </view>
  <wd-popup
    v-model="show" position="bottom" :safe-area-inset-bottom="true"
    custom-style="padding: 30rpx;border-radius:24rpx 24rpx 0 0"
  >
    <SignInStatus v-if="detailType === 3" />
    <StatDetail v-else :status="detailType" :total="detailTotal" />
  </wd-popup>
</template>

<style lang="scss" scoped>
  .line {
    height: 1px;
    background: #ddd;
    transform: scaleY(0.5);
  }

  .line-col {
    width: 1px;
    background: #ddd;
    transform: scaleX(0.5);
    height: 40rpx;
  }

  .user-item {
    width: calc(25% - 1px);
    text-align: center;
    font-size: 30rpx;
  }

  .border {
    border: 1px solid #2da069;
    padding: 10rpx 20rpx;
    color: #2da069;
  }
</style>
